<template>
	<div class="body">
		<!-- 手机号修改 -->
		<!-- <div class="header">
			<div>
				<img @click="returnGo" src="../../assets/homeimg/滑动左.png" />
				<span>修改手机号</span>
			</div>
		</div> -->
		<div class="min">
			<div class="boundnum">
				{{userdata.nickname}}:您现在绑定的手机号为{{userdata.mobile}}
			</div>
			<div class="num">
				<p>
					<input style="flex:1;background-color:#f7f7f7" type="text" v-model="userdata.mobile" disabled="disabled" placeholder="请输入目前已绑定的手机号码" />
				</p>
				<p>
					<input style="flex:1;background-color:#f7f7f7" type="text" v-model="newnum" placeholder="请输入新绑定的手机号码" />
				</p>
				<p>
					<input style="flex:1;background-color:#f7f7f7" type="text" v-model="code" placeholder="请输入验证码" />
					<span @click="send">{{second - 60 != 0 ? second+'s后重发':'获取验证码'}}</span>
				</p>
			</div>
			<div class="save" @click="save">
				保存
			</div>
		</div>
	</div>
</template>
<script>
	import mineApi from "@/api/mine";
	import { Toast } from 'vant';
	export default {
		data() {
			return {
				// oldnum: "",
				newnum: "",
				userdata: {},
				code: '',
				second: 60
			};
		},
		created() {
			// if (localStorage.getItem("userInfo")) {
			// 	this.userdata = JSON.parse(localStorage.getItem("userInfo"));
			// 	console.log(this.userdata)
			// }
			this.userdata.nickname = this.$route.query.name;
			this.userdata.mobile = this.$route.query.phone
		},
		methods: {
			//获取验证码
			send() {
				if(this.newnum == ''){
					Toast('请输入新手机号');
					return
				}
				if(this.userdata.mobile == this.newnum){
					Toast('该手机号已被占用');
					return
				}
				let that = this;
				mineApi.send({
					mobile: this.newnum,
					event: 'changemobile'
				}).then(res => {
					// console.log(res);
					if (res.code == 1) {
						let interval = setInterval(() => {
							--that.second
						}, 1000)
						setTimeout(() => {
							clearInterval(interval)
							that.disabled = false
							that.second = 60
						}, 60000)
						// that.code = res.data;
					}
					
				})
			},
			save() {
				if(this.newnum == ''){
					Toast('请输入新手机号');
					return
				}
				if(this.code == ''){
					Toast('请输入验证码');
					return
				}
				var params = {
					mobile: this.userdata.mobile,
					phone: this.newnum,
					captcha: this.code
				}
				this.$http.post('/api/user/changemobile',params).then(res => {
					// console.log(res)
					if(res.code == 1){
						Toast.success('修改成功');
						window.h5_android && window.h5_android.postPhone(this.newnum);
						this.$router.back()
					}
				})
			},
			returnGo() {
				this.$router.go(-1);
			},
		}
	};
</script>
<style lang="scss" scoped="scoped">
	.body {
		color: #333333;
		height: 100%;
	}

	.header {
		// font-weight: bold;
		width: 100%;
		text-align: center;
		height: 2.75rem;
		line-height: 2.75rem;
		padding-top: 1.25rem;
		position: relative;
		border-bottom: 1px solid #dcdcdc;
		color: #333333;
		font-size: 1.25rem;

		img {
			width: 0.625rem;
			height: 1.125rem;
			position: absolute;
			left: 1rem;
			bottom: 0.75rem;
		}
	}

	// 在scss文件中
	@supports(bottom:constant(safe-area-inset-top)) {

		// 如果存在底部安全区域
		.header {
			padding-top: constant(safe-area-inset-top);

		}

	}

	@supports(bottom:env(safe-area-inset-top)) {

		// 如果存在底部安全区域
		.header {
			padding-top: env(safe-area-inset-top);

		}

	}

	.min {
		margin-top: 10px;
	}

	.boundnum {
		width: 100%;
		height: 2.75rem;
		background: #f7f7fc;
		line-height: 2.75rem;
		color: #fd7849;
		font-size: 0.75rem;
		padding-left: 1rem;
		box-sizing: border-box;
	}

	.num {
		p {
			display: block;
			width: 100%;
			height: 2.8125rem;
			border-bottom: 1px solid #dcdcdc;
			display: flex;
			padding: 0 .8rem;
			box-sizing: border-box;
			input {
				width: 100%;
				height: 1.5625rem;
				line-height: 2rem;
				// padding-left: 1.25rem;
				margin-top: 0.625rem;
				border: none;
				outline: medium;
			}

			span {
				display: inline-block;
				width: 6.25rem;
				height: 1.75rem;
				border: 1px solid #d2d2d2;
				text-align: center;
				font-size: 0.75rem;
				margin-top: 0.625rem;
				color: #999;
				border-radius: 0.875rem;
				line-height: 1.625rem;
			}
		}
	}

	.save {
		width: 18.75rem;
		height: 2.75rem;
		border-radius: 1.375rem;
		background: #ffb008;
		color: #fff;
		text-align: center;
		line-height: 2.75rem;
		margin: 0 auto;
		margin-top: 2.25rem;
	}
</style>
